<template>
  <div class="wrapper">
    <!-- <mt-header fixed title="我的自选">
      <router-link to="/list" slot="left">
        <!-- <mt-button icon="back"></mt-button> -->
      <!-- </router-link>
      <mt-button slot="right" icon="search" @click="toSearch"></mt-button>
    </mt-header>  -->
    <div class="account-box">
      <div class="content">
        <div class="box page-part">
          <div class="box-contain clearfix">
            <div :class="i.floatPoint<0?'tab greenBg':'tab redBg'" v-for="(i,index) in market" v-if="index < 3"
                 :key="i.key">
              <p :index='index' class="name">{{i.indexName}}</p>
              <p :class="changeTextClass[index] == true?'price heartBeat':'price'">
                {{Number(i.currentPoint).toFixed(2)}}</p>
              <div class="status">
                <span :class="i.floatPoint<0?'pifting green':'pifting red'">{{Number(i.floatPoint).toFixed(2)}}</span>
                <span :class="i.floatRate<0?'Percentage green':'Percentage red'">{{i.floatRate}}%</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <ul class="table-list">
      <li class="title">
        <div>
          <ul class='clearfix'>
            <li class="li-title">股票</li>
            <li class="li-base">最新</li>
            <li class="li-base">涨跌幅</li>
            <li class="li-base text-center">
              删自选
            </li>
          </ul>
        </div>

      </li>
    </ul>
    <ul class="table-list table-list-body"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
      <li class="list-body" v-for="item in list" :key="item.key">
        <div>
          <ul class="clearfix" :class="item.nowPrice-item.preclose_px<0?'green':'red'">
            <li @click='toDetail(item)' :class="item.stock_plate == '科创'?'li-title li-title-kc':'li-title'">
              <p class="name">
                <!-- <i v-if="item.stock_plate != '科创'" class="iconfont icon-r red"></i> -->
                {{item.stockName}}
              </p>
              <!-- <a href="javascript:;"  class="name">{{item.title}}</a> -->
              <p v-if="item.stock_plate == '科创'" class="code"><i class="iconfont kechuang-mark">科创</i>{{item.stockCode}}
              </p>
              <p v-else class="code">
                <i :class="item.stock_type == 'sz'?'iconfont shen-mark hushen-mark':'iconfont hushen-mark'">{{item.stock_type
                  == 'sz'?'深':'沪'}}</i>
                {{item.stockCode}}
              </p>
            </li>
            <li @click='toDetail(item)' class="li-base">
              <span>{{item.nowPrice?Number(item.nowPrice).toFixed(2):'-'}}</span>
            </li>
            <li @click='toDetail(item)' class="li-base">
              <span v-if="item.nowPrice == 0">-</span>
              <span v-else>{{item.nowPrice-item.preclose_px>0?'+':''}}{{item.hcrate?item.hcrate:'-'}}%</span>
            </li>
            <li class="li-base text-center">
              <mt-button plain @click="toDeleteMy(item)"><i class="iconfont icon-shanchucopy"></i></mt-button>
            </li>
          </ul>
        </div>

      </li>
    </ul>
    <div v-if="list.length<=0 && getStatus" class="load-all text-center">
      <mt-spinner type="fading-circle"></mt-spinner>
    </div>
    <div v-show="loading" class="load-all text-center">
      <mt-spinner type="fading-circle"></mt-spinner>
       {{ $t('hj235') }}
    </div>
    <div v-show="!loading && !getStatus" class="load-all text-center">
      {{ $t('hj268') }}
    </div>
    <foot></foot>
  </div>
</template>

<script>
import foot from '../../components/foot/foot'
import { Toast } from 'mint-ui'
import * as api from '@/axios/api'

export default {
  components: {
    foot
  },
  props: {},
  data () {
    return {
      loading: false, // 正在加载下一页
      isRefresh: false, // 正在刷新
      getStatus: false, // 正在获取数据
      list: [],
      timer: '',
      currentNum: 15,
      market: [],
      changeTextClass: {},
      // pageNum:1,
      // pageSize:15
    }
  },
  watch: {},
  computed: {},
  created () {
    this.timer = setInterval(this.refreshList, 5000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  mounted () {
    this.getStock()
    this.getMarket()
  },
  methods: {
    async getMarket () {
      // 获取大盘指数
      let result = await api.getIndexMarket()
      if (result.status === 0) {
        this.market = result.data
      } else {
        Toast(result.msg)
      }
    },
    async getStock () {
      let opt = {
        pageNum: this.pageNum,
        pageSize: 15
      }
      this.getStatus = true
      let data = await api.getMyList(opt)
      this.getStatus = false
      if (data.status === 0) {
        this.list = data.data.list
      } else {
        Toast(data.msg)
      }
    },
    async refreshList () {
      if (this.loading) {
        return
      }
      let opt = {
        pageNum: 1,
        pageSize: this.currentNum
      }
      this.isRefresh = true
      let data = await api.getMyList(opt)
      this.list = data.data.list
      this.isRefresh = false
    },
    async loadMore () {
      if (this.list.length < 10) {
        return
      }
      this.loading = true
      // 加载下一页
      this.pageNum++
      await this.getStock()
      this.currentNum = this.pageNum * this.pageSize
      this.loading = false
    },
    async toDeleteMy (val) {
      let data = await api.delOption({ code: val.stockCode })
      if (data.status === 0) {
        Toast('删除自选股成功')
        this.getStock()
      } else {
        Toast(data.msg)
      }
    },
    async getQhDetail (code,stockGid) {
      let opts = {
        futuresCode: code
      }
      let data = await api.queryFuturesByCode(opts)
      if (data.status === 0) {
        this.statusDetail = data.data
        this.$router.push({
          path: '/listdetail2',
          query: {
            code: stockGid,
            qhinfo: this.statusDetail
          }
        })
      } else {
        Toast(data.msg)
      }
    },
    toDetail (val) {
      // if(true){
      //     Toast('系统正在升级，暂关闭交易！')
      //     return
      // }
      let code =val.stockCode
      if(val.stockGid !== undefined && val.stockGid.indexOf('hf_')!=-1){
        this.getQhDetail(val.stockCode,val.stockGid)
      } else if(val.stockCode !== undefined && val.stockCode.substring(0,3)=='000'){
        code = val.stockGid
        // this.$router.push({
        //   path: '/listdetail',
        //   query: {
        //     code: code,
        //     stock_type:val.stock_type,
        //     zsinfo: val
        //   }
        // })

        this.$router.push({
          path: '/listdetail2',
          query: {
            code: code,
            stock_type:val.stock_type,
            zsinfo: val
          }
        })
        return
      } else {
        // 详情
        // this.$router.push({
        //   path: '/listdetail',
        //   query: {
        //     code: code,
        //     name: val.stockName
        //   }
        // })

        this.$router.push({
          path: '/listdetail2',
          query: {
            code: code,
            stock_type:val.stock_type,
            zsinfo: val
          }
        })
      }
      
    },
    toSearch () {
      this.$router.push('/searchmylist')
    }
  }
}
</script>
<style lang="less" scoped>
  .table-list-body {
    // padding-top:0.62rem;
    // margin-top: 40px;
  }

  .wrapper {
    padding-top: 0.2rem;
    background-color: #16171d;
  }

  .account-box {
    margin-top: 0.5rem;
    background-color: #16171d;
    .box-contain {
    background-color: #16171d;
    }
  }

  .red-bg .table-list .title {
    //   top: 2.5rem;
  }

  /*大盘指数*/
  .box-contain {
    min-height: 1.3rem;

    .more {
      position: absolute;
      right: 0;
      padding-top: 0.5rem;
      padding-right: 0.2rem;
      cursor: pointer;
    }

    .tab {
      float: left;
      width: 31%;
      margin: 0.05rem 1%;
      margin-top: 0;
      text-align: center;
      padding: 0.1rem 0;
      background: none !important;

      p {
        margin-top: 0.1rem;
      }

      .name {
        font-size: .22rem;
      }

      .price {
        font-size: 0.34rem;
      }

      .status {
        margin-top: 0.1rem;
        font-size: .22rem;
      }
    }
  }
  .table-list .title {
    top: 1rem;
  }

  .red-theme {
    .table-list .title {
      background-color: #E9E9E9;
      color: #222;
    }.wrapper {
      background-color: #E9E9E9;
    }
    .table-list ul li {
      border-bottom-color: #E9E9E9;
      background-color: #fff;
    }
    .account-box .box-contain {
      background-color: #E9E9E9;
    }
    .box-contain .tab .name {
      color: #222;
    }
    .table-list ul .li-title .name {
      color: #222;
    }
    .load-all{
      background-color: #E9E9E9;
    }
  }
</style>
